<template>
    <div class="container">
        <avue-data-tabs :option="option"></avue-data-tabs>
        <avue-data-box :option="option"></avue-data-box>
        <avue-data-display :option="option1"></avue-data-display>

        <avue-tree
            :option="option2"
            :data="data2"
            @node-click="nodeClick"
            @update="update"
            @save="save"
            @del="del"
            v-model="form2"
        >
            <template slot-scope="scope" slot="menuBtn">
                <el-dropdown-item @click.native="tip(scope.node,scope.data)">自定义按钮</el-dropdown-item>
            </template>
        </avue-tree>
        <avue-empty></avue-empty>
        <!-- <location/> -->

        <el-button type="primary" @click="getLocationDialog">坐标拾取</el-button>
        <div class="locationResult" v-if="locationResult">
            {{locationResult}}
        </div>
        <el-dialog
            title="坐标拾取"
            :visible.sync="dialogVisible">
            
            <location @getLocationResult="getLocationResult"/>

        </el-dialog>
        

        <!-- <avue-echart-wordCloud ref="echart" :option="config" :data="data" width="1000"></avue-echart-wordCloud> -->

        <el-card shadow="hover" style="padding:0">
            <template v-for="i in 100">
                {{i}} <br :key="i">
            </template>
            <back-to-top :scrollContainerClass="scrollContainerClass" />
        </el-card>

        <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
    </div>
</template>

<script>
import Location from "@/views/components/location";
export default {
    name: "Table",
    components: {
        Location
    },
    data() {
        return {
            dialogVisible: false,
            locationResult: null,
            form3: {
                video: 'https://www.w3school.com.cn/i/movie.ogg',
                imgUrl: [{ "label": "avue@226d5c1a_logo.png", "value": "/images/logo-bg.jpg" }],
                imgUrl3: '/images/logo-bg.jpg',
                string: '/images/logo-bg.jpg,/images/logo-bg.jpg',
                img: ['/images/logo-bg.jpg', '/images/logo-bg.jpg']
            },
            option3: {
                labelWidth: 120,
                column: [
                    {
                        label: '视频',
                        prop: 'video',
                        type: 'upload',
                        params: {
                            is: 'video'
                        },
                        listType: 'picture-img',
                        span: 24,
                        tip: '只能上传jpg/png用户头像，且不超过500kb',
                        action: '/imgupload'
                    },
                    {
                        label: '附件上传',
                        prop: 'imgUrl',
                        type: 'upload',
                        loadText: '附件上传中，请稍等',
                        span: 24,
                        propsHttp: {
                            res: 'data'
                        },
                        tip: '只能上传jpg/png文件，且不超过500kb',
                        action: '/imgupload'
                    },
                ]            },
            form2: {},
            data2: [
                {
                    id: 0,
                    label: '一级部门',
                    value: 0,
                    children: [
                        {
                            id: 1,
                            label: '一级部门1',
                            value: 0,
                        }, {
                            id: 2,
                            label: '一级部门2',
                            value: 0,
                        }
                    ]
                }, {
                    id: 3,
                    label: '二级部门',
                    value: 0,
                    children: [
                        {
                            id: 4,
                            label: '二级部门1',
                            value: 0,
                        }, {
                            id: 5,
                            label: '二级部门2',
                            value: 0,
                        }
                    ]
                }
            ],
            option2: {
                nodeKey: 'id',
                size: 'small',
                formOption: {
                    labelWidth: 100,
                    column: [{
                        label: '自定义项',
                        prop: 'test'
                    }],
                },
                props: {
                    labelText: '标题',
                    label: 'label',
                    value: 'value',
                    children: 'children'
                }
            },
            option1: {
                span: 6,
                data: [
                    {
                        click: function (item) {
                            alert(JSON.stringify(item));
                        },
                        count: 100,
                        title: '日活跃数',
                        href: 'https://avuejs.com',
                        target: '_blank'
                    },
                    {
                        click: function (item) {
                            alert(JSON.stringify(item));
                        },
                        count: '3,000',
                        title: '月活跃数',
                        href: 'https://avuejs.com',
                        target: '_blank'
                    },
                    {
                        click: function (item) {
                            alert(JSON.stringify(item));
                        },
                        count: '20,000',
                        title: '年活跃数',
                        href: 'https://avuejs.com',
                        target: '_blank'
                    },
                    {
                        click: function (item) {
                            alert(JSON.stringify(item));
                        },
                        count: '40,000',
                        title: '周活跃数',
                        href: 'https://avuejs.com',
                        target: '_blank'
                    }
                ]
            },
            option: {
                data: [
                    {
                        click: function (item) {
                            alert(JSON.stringify(item));
                        },
                        title: '分类统计',
                        subtitle: '实时',
                        count: 7993,
                        allcount: 10222,
                        text: '当前分类总记录数',
                        color: 'rgb(27, 201, 142)',
                        key: '类'
                    },
                    {
                        click: function (item) {
                            alert(JSON.stringify(item));
                        },
                        title: '附件统计',
                        subtitle: '实时',
                        count: 3112,
                        allcount: 10222,
                        text: '当前上传的附件数',
                        color: 'rgb(230, 71, 88)',
                        key: '附'
                    },
                    {
                        click: function (item) {
                            alert(JSON.stringify(item));
                        },
                        title: '文章统计',
                        subtitle: '实时',
                        count: 908,
                        allcount: 10222,
                        text: '评论次数',
                        color: 'rgb(178, 159, 255)',
                        key: '评'
                    }
                ]
            },
            scrollContainerClass: "content-wrapper",
            data: [{
                "name": "iPhone X",
                "value": 19651
            }, {
                "name": "Mac Pro",
                "value": 18341
            }, {
                "name": "华为P20",
                "value": 17319
            }, {
                "name": "小米手机",
                "value": 12550
            }, {
                "name": "欧莱雅",
                "value": 11638
            }, {
                "name": "玛莎拉蒂",
                "value": 10608
            }, {
                "name": "特斯拉Model S",
                "value": 8298
            }, {
                "name": "jackjones",
                "value": 7630
            }, {
                "name": "韩都衣舍",
                "value": 7440
            }, {
                "name": "天生要强",
                "value": 6065
            }, {
                "name": "梅西",
                "value": 5065
            }, {
                "name": "三只松鼠",
                "value": 4965
            }],
            config: {
                "minFontSize": 30,
                "maxFontSize": 80,
                "split": 30,
                "rotate": true
            }
        }
    },
    
    methods: {
        getLocationDialog() {
            this.dialogVisible = true
        },
        getLocationResult(result) {
            this.dialogVisible = false
            this.locationResult = result
        },


        tip(node, data) {
            this.$message.success(JSON.stringify(data))
        },
        del(data, node, done) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('删除回调')
                done();
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        update(data, node, done, loading) {
            this.$message.success('更新回调')
            done();
        },
        save(data, node, done) {
            this.$message.success('新增回调')
            this.form.id = new Date().getTime();
            this.form.value = new Date().getTime();
            this.form.children = [];
            done();
        },
        nodeClick(data) {
            this.$message.success(JSON.stringify(data))
        }
    }
};
</script>
<style >

</style>
<style scoped>
</style>